无心 | 人生若只如初见，何事秋风悲画扇
2019-04-17 | 重学前端系列笔记 | UNLOCK

12. HTML资源替换型元素

前言

我们在做网站的时候，需要写 JavaScript 和 css 以及引入其他的资源。 css 是可以写 内联样式、嵌入式样式、外部样式。

script

像是 JavaScript 可以使用 src 引入外部 JS 文件

1
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript"></script>

但是如果是这样

1
2
3
4
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript">
   var time  = new Date();
   console.log(time);
</script>

上面这种写法，引入的文件会将 script 里的内容覆盖，使得里面的代码不生效，我们通常将这种类型的标签，称之为替换型标签 ：凡是替换型元素，都是使用 src 属性来引用文件的

像 style 这种非替换型标签，不能使用 src 引入外部文件，就这样我们需要借助 link 标签

1
<link rel="stylesheet" href="style.css">

img

这个标签的意义是引入外部的图片资源，使用 src 链接，如果没有 src 属性，这个标签将毫无用处

1
<img src="/images/temp.jpg" alt="" sizes="" srcset="" width="300px">

上面的代码显示，引入了一个 temp 的图片，并规定了图片的宽， W3C 规定 img 标签，宽高属性如果只给一个，那么将会进行等比例缩放处理
srcset 提供了根据屏幕条件选取图片的能力，但是其实更好 是使用 picture

picture

picturesrc** 链接

1
2
3
4
<picture>
  <source srcset="image-wide.png" media="(min-width: 600px)">
  <img src="image-narrow.png">
</picture>

它使用 source 元素来指定图片源，并且支持多个图片， picture 标签里包裹 img 是为了兼容，当 不支持 source 或者不支持 picture 的时候， img 作为最后一道屏障， source 标签中的 media 属性跟 @media 具有同样的功能。
同样支持 source 标签的，还有 video、audio 、

video

1
2
3
4
5
6
7
8
9
// 兼容完整版写法
<video controls="controls" >
  <source src="movie.webm" type="video/webm" >
  <source src="movie.ogg" type="video/ogg" >
  <source src="movie.mp4" type="video/mp4">
  你的浏览器暂不支持视频，请更换浏览器查看
</video>
// 普通版写法
<video controls="controls" src="movie.mp4"></video>

如果是需要兼容老版本的浏览器，需要加上 <object>、<embed> 标签，其中 <object> 使用 data 属性链接资源 ，而 <embed> 是使用 src 链接资源

audio

写法跟上面的差不多

1
2
3
4
5
6
7
8
// 兼容完整版写法
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <p>你的平台不支持音频，请更换浏览器再查看</p>
</audio>
// 普通版写法
<audio controls="controls" src="movie.mp3"></audio>

iframe

这个标签可以将页面完整的引入到当前页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<iframe>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <p>故人心尚永，故人心不现</p>
    </body>
    </html>
</iframe>
资源引入

评论加载中